<template>
	<view>
		<view class="top">
			<uni-icons style="cursor: pointer;" class="back" type="back" size="30" @click="back()"></uni-icons>
			<view>选择地址</view>
		</view>
		<view class="address">
			<view class="littleaddress">
				<view class="left">
					<uni-icons type="location" size="30"></uni-icons>
					<text>{{province}}</text>
					<uni-icons type="forward" size="30"></uni-icons>
				</view>
				<view class="search">
					<image src="https://cdn3.axureshop.com/demo/2116044/images/%E9%80%89%E6%8B%A9%E5%9F%8E%E5%B8%82/u1812.png" mode=""></image>
					<view>搜索</view>
				</view>
			</view>
			<view class="map">
				<!-- <map
				:latitude="latitude" 
				:longitude="longitude"
				scale="16"
				:markers="mark"
				show-location	
				>
				</map> -->
				<map :longitude="longitude" 
				:latitude="latitude" 
				scale="16" 
				show-location	
				:markers="markers">
				</map>
			</view>
		</view>
		<view class="none"></view>
		<view class="list">
			<view class="form first">
				<img src="https://cdn3.axureshop.com/demo/2116044/images/%E9%80%89%E6%8B%A9%E5%9C%B0%E5%9D%80/u4364.png" alt="">
				<view class="content" @click="golastPage()">
					<view>当前位置：{{locationname}}</view>
					<view>{{address}}</view>
				</view>
			</view>
			<view class="form" v-for="(item,index) in locationlist" @click="golastPage2(item.address)">
				<img src="https://cdn3.axureshop.com/demo/2116044/images/%E9%80%89%E6%8B%A9%E5%9C%B0%E5%9D%80/u4361.png" alt="">
				<view class="content">
					<view>{{item.address}}</view>
					<view>{{item.address}}{{item.houseNum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				latitude: 31.12736,
				longitude: 104.16694,
				userid:'1',
				location:[],
				markers:[
					// {
					// 	id:1,
					// 	latitude:this.latitude,
					// 	longitude:this.longitude,
					// 	title:'什邡',
					// 	iconPath:'/static/location.png',
					// 	with:30,
					// 	height:30
					// }
				],
				locationname:'',
				address:'点击选择收货地址',
				province:'',
				lastPage:'0',
				userid:'1',
				locationlist:[]
			}
		},
		onLoad:function(option) {
			uni.getLocation({
				type: 'gcj02',
				geocode:true,
				success: res=> {
					// console.log(res);
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					this.latitude=res.latitude;
					this.longitude=res.longitude;
				}
			});
			var that = this;
			uni.chooseLocation({
				success: function (res) {
					// console.log('位置名称：' + res.name);
					// console.log('详细地址：' + res.address);
					// console.log('纬度：' + res.latitude);
					// console.log('经度：' + res.longitude);
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.locationname = res.name;
					that.address = res.address;
					// console.log(res);
				},
				fail:function(res){
					// console.log(res);
				}
			});
			this.lastPage = option.page;
			console.log(this.lastPage);
			// uni.request({
			// 	url:"https://api.jisuapi.com/geoconvert/coord2addr",
			// 	data:{
			// 		lat:this.latitude,
			// 		lng:this.longitude,
			// 		type:"baidu",
			// 		appkey:"1b72844d47922af1"
			// 	},
			// 	success:function(res){
			// 		console.log(res);
			// 		this.location = res.data.result;
			// 		console.log(this.location);
			// 	}
			// })
		},
		methods: {
			back(){
				// console.log('1');
				let pages = getCurrentPages();
				// console.log(pages);
				let backPages = pages.length -1;
				uni.navigateBack({
					delta:backPages,
				});
				// uni.setStorageSync('address',this.address);
			},
			getProvince(){
				this.province = this.address.slice(0,3);
				// console.log(this.province);
			},
			golastPage(){
				if(this.lastPage == '1'){
					uni.navigateTo({
						url:"/pages/editaddress/editaddress?address="+this.address,
					})
				}else{
					uni.navigateTo({
						url:"/pages/addaddress/addaddress?address="+this.address,
					})
				}
			},
			golastPage2(address){
				this.address = address;
				if(this.lastPage == '1'){
					uni.navigateTo({
						url:"/pages/editaddress/editaddress?address="+this.address,
					})
				}else{
					uni.navigateTo({
						url:"/pages/addaddress/addaddress?address="+this.address,
					})
				}
			}
		},
		onShow(){
			this.getProvince();
			http({
				url:'/sellocation',
				method:'post',
				data:{
					userid:this.userid,
				},
				success: (res) => {
					console.log(res);
					this.locationlist = res.data;
					console.log(this.locationlist);
				}
			})
		},
		
	}
</script>

<style>
page{
	background-color: #F2F2F2;
}
.top{
	width: 100%;
	padding-top: 60rpx;
	padding-bottom: 20rpx;
	display: flex;
	justify-content: center;
	font-size: 30rpx;
	position: fixed;
	background-color: #ffffff;
	/* border: 1rpx blue solid; */
	z-index: 2;
}
.top>.back{
	position: absolute;
	left: 0;
	zoom: 0.8;
}
.address{
	width: 100%;
	position: fixed;
	z-index: 1;
}

.littleaddress{
	margin-top: 110rpx;
	width: 100%;
	display: flex;
	height: 90rpx;
	background-color: #ffffff;
	line-height: 80rpx;
}
.littleaddress .left uni-icons:nth-child(1){
	zoom:0.5;
	padding-left: 30rpx;
	padding-right: 10rpx;
}
.littleaddress .left text:nth-child(2){
	font-size: 25rpx;
	padding-bottom: ;
}
.littleaddress .left uni-icons:nth-child(3){
	zoom:0.4;
}
.littleaddress .search{
	display: flex;
	position: absolute;
	right: 20rpx;
	height: 70rpx;
	line-height: 70rpx;
	margin-top: 10rpx;
	width: 180rpx;
	border: 1rpx #F2F2F2 solid;
	border-radius: 50rpx;
}
.littleaddress .search image{
	width: 40rpx;
	height: 40rpx;
	margin-top: 10rpx;
	margin-right: 20rpx;
	margin-left: 20rpx;
}
.littleaddress .search view{
	font-size: 26rpx;
	color: #CCCCCC;
}
.map{
	width: 100%;
	display: flex;
	/* margin-top: 300rpx; */
}
.map map{
	width: 100%;
	height: 450rpx;
}
.none{
	height: 650rpx;
}
.list .form{
	height: 170rpx;
	width: 690rpx;
	margin-left: 30rpx;
	border-radius: 15rpx;
	display: flex;
	margin-top: 20rpx;
	margin-bottom: 40rpx;
	background-color: #ffffff;
}
.list .form img{
	width: 25rpx;
	height: 35rpx;
	margin-left: 40rpx;
	margin-top: 65rpx;
	margin-right: 30rpx;
}
.list .form .content{
	margin-top: 35rpx;
}
.list .form .content view:nth-child(1){
	font-size: 30rpx;
	margin-bottom: 20rpx;
}
.list .form .content view:nth-child(2){
	font-size: 25rpx;
	color: #999999;
}
.list .first{
	background-color: #f5ede6;
	border: solid 1rpx #f77214;
}
.list .first .content view:nth-child(1){
	color: #f77214;
}
</style>
